.comment_item {
    position: relative;
    display: flex;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: var(--t-modal-shadow);
    border-radius: var(--border-radius);
    background: var(--box-background);

    .comment_avatar {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 100%;
        overflow: hidden;
        
        img {
            width: 100%;
            height: 100%;
        }
    }

    .comment_info {
        flex: 1;
        padding-left: 20px;

        a {
            display: inline-block;
            padding-bottom: 10px;
            line-height: 14px;
            color: var(--t-light-color);
            font-weight: 300;

            &:hover {
                color: var(--t-muted-color);
            }
        }
    }

    .comment_content {
        line-height: 24px;
        color: var(--t-muted-color);
    }

    .comment_reply {
        padding: 10px;
        line-height: 28px;
        margin: 5px 0;
        color: var(--t-muted-color);
        border-radius: var(--border-radius);
        background: var(--t-container-background);

        a {
            display: inline-block;
            line-height: 28px;
            padding: 0;
        }
    }

    .comment_footer {
        display: flex;
        color: var(--t-light-color);
        font-weight: 300;

        .comment_time {
            display: inline-block;
            line-height: 28px;
        }

        .comment_oper {
            flex: 1;
            text-align: right;

            span {
                display: inline-flex;
                margin-left: 10px;
                line-height: 28px;
                align-items: center;
                cursor: pointer;

                &:global {
                    &.active, &.active .iconfont {
                        color: var(--t-highlight-color);
                    }
                }
            }
        }
    }

    .isHot {
        position: absolute;
        right: 0;
        top: -3px;
        z-index: 1;
        // transform: rotate(45deg);

        :global {
            .icon-hot {
                font-size: 60px;
                color: var(--t-highlight-color);
                opacity: .8;
            }
        }
    }

    .comment_del {
        cursor: pointer;
        display: none;
    }

    &:hover {
        .comment_del {
            display: inline-block;
        }
    }

    &:last-child {
        border: none;
    }
}